<template>
  <Modal v-model="visible" width="840" class="source-model">
      <div class="source-menu">
        <h1>图表库</h1>
        <ul>
          <li class="active">
            常用图表
          </li>
          <li>高级图表</li>
        </ul>
      </div>
      <div class="source-content">
        <Tabs value="name1">
            <TabPane label="Line" name="name1">
              <div class="source-list">
                <div class="source-item" @click="handlerAddChart">
                  <img src="http://oihdlfeky.bkt.clouddn.com/17-4-12/76284943-file_1491990447624_fe9a.png" alt="">
                  <p>基础折线图</p>
                </div>
              </div>
            </TabPane>
            <TabPane label="Pie" name="name2">标签二的内容</TabPane>
            <TabPane label="Bar" name="name4">标签三的内容</TabPane>
            <TabPane label="Map" name="name5">标签三的内容</TabPane>
            <TabPane label="Scatter" name="name3">标签三的内容</TabPane>
        </Tabs>
      </div>
    <div slot="footer"></div>
  </Modal>
</template>

<script>
import { Vue, Component, Watch, Model, Emit} from 'vue-property-decorator'
import ModalSync from "@/mixins/ModalSync"
import {
  State,
  Getter,
  Action
} from 'vuex-class'
@Component({
  mixins: [ModalSync]
})
export default class SourceChart extends Vue {
  @Action actAddElement
  visible=false
  handlerAddChart ():void {
    let newElement = {
      type: "chart",
      subtype: "line",
      transform: {
        width: 400,
        height: 300
      },
      data: {
        type: 'static',
        mapping: [
          {
            name: 'xAxis',
            key: 'xAxis',
            desc: 'X轴类目'
          },
          {
            name: 'data',
            key: 'data',
            desc: '数据'
          }
        ],
        source: {
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          data: [820, 932, 901, 934, 1290, 1330, 1320]
        },
        ajax: {
          url: ''
        }
      },
      extra: {
        title: {
          subtext: '纯属虚构',
          text: '未来一周气温变化'
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          type: 'line'
        }]
      }

    }
    this.actAddElement(newElement)
    this.visible = false
  }
}

</script>
<style lang="less" scoped>
.source-img-model{

}
</style>
